<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="jakarta.faces.html"
  xmlns:ui="jakarta.faces.facelets"
  xmlns:p="http://primefaces.org/ui" xmlns:f="jakarta.faces.core">
<ui:composition template="/WEB-INF/templates/common/admin.xhtml">
  <ui:define name="title">Track Cargo</ui:define>
  <ui:define name="content">

    <div class="ui-grid-col-2" id="leftCol"></div>
    <br />
    <div class="ui-grid-col-8" id="container" style="display: none">
      <br />
      <p:card>
        <h:form id="trackingForm">
          <h:panelGrid columns="3" cellpadding="15">
            <p>Enter your tracking ID:</p>
            <p:autoComplete id="trackingIdInput"
              value="#{admin.track.trackingId}" required="true"
              forceSelection="true" placeholder="XYZ789"
              title="Valid tracking ID"
              completeMethod="#{admin.track.getTrackingIds}" />
            <p:commandButton value="Track!"
              action="#{admin.track.onTrackById()}" update="cargo-status" />
          </h:panelGrid>
        </h:form>
      </p:card>

      <div class="ui-g-12">
        <p:separator />
      </div>
      <h:panelGroup id="cargo-status">
        <div class="ui-g-12">
          <h:panelGroup rendered="#{not empty admin.track.cargo}">
            <div id="result">

              <p>
                Cargo <strong><h:link value="#{admin.track.trackingId}"
                    id="trackingId"
                    outcome="/admin/show.xhtml?faces-redirect=true"
                    style="text-decoration: none;color: black;">
                    <f:param name="trackingId" value="#{admin.track.trackingId}" />
                  </h:link></strong> is currently <strong>#{admin.track.cargo.statusText}</strong>
              </p>

              <p:tooltip id="toolTipFade" for="trackingId"
                value="Click to see itinerary's details." />

              <p>
                Estimated time of arrival in <strong>#{admin.track.cargo.destination}</strong>:
                #{admin.track.cargo.eta}
              </p>
              <ui:fragment
                rendered="#{not empty admin.track.cargo.nextExpectedActivity}">
                <p>#{admin.track.cargo.nextExpectedActivity}</p>
              </ui:fragment>

              <h:panelGroup rendered="#{admin.track.cargo.misdirected}">
                <p>
                  <i class="fa fa-exclamation-triangle" style="color: #9b2332"></i>
                  Cargo is misdirected.
                </p>
              </h:panelGroup>
            </div>
          </h:panelGroup>

          <h:outputLabel
            value="Cargo with tracking ID #{admin.track.trackingId} not found."
            rendered="#{empty admin.track.cargo and not empty admin.track.trackingId}" />
        </div>

        <h:panelGroup rendered="#{not empty admin.track.cargo}">
          <div class="ui-g ui-g-12">
            <div class="ui-g-3">
              <p:outputLabel value="Handling History"
                style="font-size: 2em; font-weight: bold" />
            </div>

            <div class="ui-g-12">
              <p:separator />
              <br /> <br />
            </div>

            <div class="ui-g-12">
              <ui:repeat value="#{admin.track.cargo.events}" var="event">
                <div>
                  <ui:fragment rendered="#{event.expected}">
                                &#160;&#160;<i class="fa fa-check"
                      style="color: green" />&#160;#{event.description}, at #{event.time}
                            </ui:fragment>
                  <ui:fragment rendered="#{!event.expected}">
                                &#160;&#160;<em class="fa fa-flag"
                      style="color: #9b2332" />&#160;#{event.description}, at #{event.time}
                            </ui:fragment>
                </div>
              </ui:repeat>

              <h:outputLabel
                value="There are no events recorded for the tracking ID #{admin.track.cargo.trackingId}."
                rendered="#{empty admin.track.cargo.events}" />
            </div>
          </div>
        </h:panelGroup>
      </h:panelGroup>
    </div>
    <h:outputScript name="js/topbar.min.js" />
    <h:outputScript name="js/topbar.js" />
    <h:outputScript name="js/progress.js" />
  </ui:define>
</ui:composition>
</html>